
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Beyond combineReducers · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="NormalizingStateShape.html" />
    
    
    <link rel="prev" href="UsingCombineReducers.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../../introduction/">
            
                <a href="../../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../../introduction/Motivation.html">
            
                <a href="../../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../../introduction/CoreConcepts.html">
            
                <a href="../../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../../introduction/ThreePrinciples.html">
            
                <a href="../../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../../introduction/PriorArt.html">
            
                <a href="../../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../../introduction/Ecosystem.html">
            
                <a href="../../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../../introduction/Examples.html">
            
                <a href="../../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../../basics/">
            
                <a href="../../basics/">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../../basics/Actions.html">
            
                <a href="../../basics/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../../basics/Reducers.html">
            
                <a href="../../basics/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../../basics/Store.html">
            
                <a href="../../basics/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../../basics/DataFlow.html">
            
                <a href="../../basics/DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../../basics/UsageWithReact.html">
            
                <a href="../../basics/UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../../basics/ExampleTodoList.html">
            
                <a href="../../basics/ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../../advanced/">
            
                <a href="../../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../../advanced/AsyncActions.html">
            
                <a href="../../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../../advanced/AsyncFlow.html">
            
                <a href="../../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../../advanced/Middleware.html">
            
                <a href="../../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../../advanced/UsageWithReactRouter.html">
            
                <a href="../../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../../advanced/ExampleRedditAPI.html">
            
                <a href="../../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../">
            
                <a href="../">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../MigratingToRedux.html">
            
                <a href="../MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../UsingObjectSpreadOperator.html">
            
                <a href="../UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../ReducingBoilerplate.html">
            
                <a href="../ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../ServerRendering.html">
            
                <a href="../ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../WritingTests.html">
            
                <a href="../WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../ComputingDerivedData.html">
            
                <a href="../ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../ImplementingUndoHistory.html">
            
                <a href="../ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../IsolatingSubapps.html">
            
                <a href="../IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../StructuringReducers.html">
            
                <a href="../StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="PrerequisiteConcepts.html">
            
                <a href="PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="BasicReducerStructure.html">
            
                <a href="BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="SplittingReducerLogic.html">
            
                <a href="SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="RefactoringReducersExample.html">
            
                <a href="RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="UsingCombineReducers.html">
            
                <a href="UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.9.6" data-path="BeyondCombineReducers.html">
            
                <a href="BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="NormalizingStateShape.html">
            
                <a href="NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="UpdatingNormalizedData.html">
            
                <a href="UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="ReusingReducerLogic.html">
            
                <a href="ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="ImmutableUpdatePatterns.html">
            
                <a href="ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="InitializingState.html">
            
                <a href="InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../UsingImmutableJS.html">
            
                <a href="../UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../../FAQ.html">
            
                <a href="../../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../../faq/General.html">
            
                <a href="../../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../../faq/Reducers.html">
            
                <a href="../../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../../faq/OrganizingState.html">
            
                <a href="../../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../../faq/StoreSetup.html">
            
                <a href="../../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../../faq/Actions.html">
            
                <a href="../../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../../faq/ImmutableData.html">
            
                <a href="../../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../../faq/CodeStructure.html">
            
                <a href="../../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../../faq/Performance.html">
            
                <a href="../../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../../faq/ReactRedux.html">
            
                <a href="../../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../../faq/Miscellaneous.html">
            
                <a href="../../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../../Troubleshooting.html">
            
                <a href="../../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../../Glossary.html">
            
                <a href="../../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../../api/">
            
                <a href="../../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../../api/createStore.html">
            
                <a href="../../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../../api/Store.html">
            
                <a href="../../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../../api/combineReducers.html">
            
                <a href="../../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../../api/applyMiddleware.html">
            
                <a href="../../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../../api/bindActionCreators.html">
            
                <a href="../../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../../api/compose.html">
            
                <a href="../../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../../Feedback.html">
            
                <a href="../../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >Beyond combineReducers</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="beyond-combinereducers">Beyond <code>combineReducers</code></h1>
<p>The <code>combineReducers</code> utility included with Redux is very useful, but is deliberately limited to handle a single common use case: updating a <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> tree that is a plain Javascript object, by delegating the work of updating each slice of <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> to a specific slice <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a>.  It does <em>not</em> handle other use cases, such as a <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> tree made up of Immutable.js Maps, trying to pass other portions of the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> tree as an additional argument to a slice <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a>, or performing &quot;ordering&quot; of slice <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> calls.  It also does not care how a given slice <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> does its work.</p>
<p>The common question, then, is &quot;How can I use <code>combineReducers</code> to handle these other use cases?&quot;.  The answer to that is simply: &quot;you don&apos;t - you probably need to use something else&quot;.  <strong>Once you go past the core use case for <code>combineReducers</code>, it&apos;s time to use more &quot;custom&quot; <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> logic</strong>, whether it be specific logic for a one-off use case, or a reusable function that could be widely shared.  Here&apos;s some suggestions for dealing with a couple of these typical use cases, but feel free to come up with your own approaches.</p>
<h2 id="using-slice-reducers-with-immutablejs-objects">Using slice reducers with Immutable.js objects</h2>
<p>Since <code>combineReducers</code> currently only works with plain Javascript objects, an application that uses an Immutable.js Map object for the top of its <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> tree could not use <code>combineReducers</code> to manage that Map.  Since many developers do use Immutable.js, there are a number of published utilities that provide equivalent functionality, such as <a href="https://github.com/gajus/redux-immutable" target="_blank">redux-immutable</a>.  This package provides its own implementation of <code>combineReducers</code> that knows how to iterate over an Immutable Map instead of a plain Javascript object.</p>
<h2 id="sharing-data-between-slice-reducers">Sharing data between slice reducers</h2>
<p>Similarly, if <code>sliceReducerA</code> happens to need some data from <code>sliceReducerB</code>&apos;s slice of <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> in order to handle a particular <a href="../../Glossary.html#action" class="glossary-term" title="">action</a>, or <code>sliceReducerB</code> happens to need the entire <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> as an argument, <code>combineReducers</code> does not handle that itself.  This could be resolved by writing a custom function that knows to pass the needed data as an additional argument in those specific cases, such as:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">combinedReducer</span>(<span class="hljs-params">state, action</span>) </span>{
    <span class="hljs-keyword">switch</span>(action.type) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;A_TYPICAL_ACTION&quot;</span> : {
            <span class="hljs-keyword">return</span> {
                a : sliceReducerA(state.a, action),
                b : sliceReducerB(state.b, action)
            };
        }
        <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;SOME_SPECIAL_ACTION&quot;</span> : {
            <span class="hljs-keyword">return</span> {
                <span class="hljs-comment">// specifically pass state.b as an additional argument</span>
                a : sliceReducerA(state.a, action, state.b),
                b : sliceReducerB(state.b, action)
            }        
        }
        <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;ANOTHER_SPECIAL_ACTION&quot;</span> : {
            <span class="hljs-keyword">return</span> {
                a : sliceReducerA(state.a, action),
                <span class="hljs-comment">// specifically pass the entire state as an additional argument</span>
                b : sliceReducerB(state.b, action, state)
            }         
        }    
        <span class="hljs-keyword">default</span>: <span class="hljs-keyword">return</span> state;
    }
}
</code></pre>
<p>Another alternative to the &quot;shared-slice updates&quot; issue would be to simply put more data into the <a href="../../Glossary.html#action" class="glossary-term" title="">action</a>.  This is easily accomplished using thunk functions or a similar approach, per this example:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">someSpecialActionCreator</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> (dispatch, getState) =&gt; {
        <span class="hljs-keyword">const</span> state = getState();
        <span class="hljs-keyword">const</span> dataFromB = selectImportantDataFromB(state);

        dispatch({
            type : <span class="hljs-string">&quot;SOME_SPECIAL_ACTION&quot;</span>,
            payload : {
                dataFromB
            }
        });
    }
}
</code></pre>
<p>Because the data from B&apos;s slice is already in the <a href="../../Glossary.html#action" class="glossary-term" title="">action</a>, the parent <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> doesn&apos;t have to do anything special to make that data available to <code>sliceReducerA</code>.</p>
<p>A third approach would be to use the <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> generated by <code>combineReducers</code> to handle the &quot;simple&quot; cases where each slice <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> can update itself independently, but also use another <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> to handle the &quot;special&quot; cases where data needs to be shared across slices.  Then, a wrapping function could call both of those reducers in turn to generate the final result:  </p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> combinedReducer = combineReducers({
    a : sliceReducerA,
    b : sliceReducerB
}); 

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">crossSliceReducer</span>(<span class="hljs-params">state, action</span>) </span>{
    <span class="hljs-keyword">switch</span>(action.type) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">&quot;SOME_SPECIAL_ACTION&quot;</span> : {
            <span class="hljs-keyword">return</span> {
                <span class="hljs-comment">// specifically pass state.b as an additional argument</span>
                a : handleSpecialCaseForA(state.a, action, state.b),
                b : sliceReducerB(state.b, action)
            }        
        }
        <span class="hljs-keyword">default</span> : <span class="hljs-keyword">return</span> state;
    }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">rootReducer</span>(<span class="hljs-params">state, action</span>) </span>{
    <span class="hljs-keyword">const</span> intermediateState = combinedReducer(state, action);
    <span class="hljs-keyword">const</span> finalState = crossSliceReducer(intermediateState, action);
    <span class="hljs-keyword">return</span> finalState;
}
</code></pre>
<p>As it turns out, there&apos;s a useful utility called <a href="https://github.com/acdlite/reduce-reducers" target="_blank">reduce-reducers</a> that can make that process easier.  It simply takes multiple reducers and runs <code>reduce()</code> on them, passing the intermediate <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> values to the next <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> in line:</p>
<pre><code class="lang-js"><span class="hljs-comment">// Same as the &quot;manual&quot; rootReducer above</span>
<span class="hljs-keyword">const</span> rootReducer = reduceReducers(combinedReducers, crossSliceReducer);
</code></pre>
<p>Note that if you use <code>reduceReducers</code>, you should make sure that the first <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> in the list is able to define the initial <a href="../../Glossary.html#state" class="glossary-term" title="">state</a>, since the later reducers will generally assume that the entire <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> already exists and not try to provide defaults.</p>
<h2 id="further-suggestions">Further Suggestions</h2>
<p>Again, it&apos;s important to understand that Redux reducers are <em>just</em> functions.  While <code>combineReducers</code> is useful, it&apos;s just one tool in the toolbox.  Functions can contain conditional logic other than switch statements, functions can be composed to wrap each other, and functions can call other functions.  Maybe you need one of your slice reducers to be able to reset its <a href="../../Glossary.html#state" class="glossary-term" title="">state</a>, and to only respond to specific actions overall.  You could do:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> undoableFilteredSliceA = compose(undoReducer, filterReducer(<span class="hljs-string">&quot;ACTION_1&quot;</span>, <span class="hljs-string">&quot;ACTION_2&quot;</span>), sliceReducerA);
<span class="hljs-keyword">const</span> rootReducer = combineReducers({
    a : undoableFilteredSliceA,
    b : normalSliceReducerB
});
</code></pre>
<p>Note that <code>combineReducers</code> doesn&apos;t know or care that there&apos;s anything special about the <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> function that&apos;s responsible for managing <code>a</code>.  We didn&apos;t need to modify <code>combineReducers</code> to specifically know how to undo things - we just built up the pieces we needed into a new composed function.  </p>
<p>Also, while <code>combineReducers</code> is the one <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> utility function that&apos;s built into Redux, there&apos;s a wide variety of third-party <a href="../../Glossary.html#reducer" class="glossary-term" title="">reducer</a> utilities that have published for reuse.  The <a href="https://github.com/markerikson/redux-ecosystem-links" target="_blank">Redux Addons Catalog</a> lists many of the third-party utilities that are available.  Or, if none of the published utilities solve your use case, you can always write a function yourself that does just exactly what you need.</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="UsingCombineReducers.html" class="navigation navigation-prev " aria-label="Previous page: Using combineReducers">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="NormalizingStateShape.html" class="navigation navigation-next " aria-label="Next page: Normalizing State Shape">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Beyond combineReducers","level":"1.5.9.6","depth":3,"next":{"title":"Normalizing State Shape","level":"1.5.9.7","depth":3,"path":"recipes/reducers/NormalizingStateShape.md","ref":"./recipes/reducers/NormalizingStateShape.md","articles":[]},"previous":{"title":"Using combineReducers","level":"1.5.9.5","depth":3,"path":"recipes/reducers/UsingCombineReducers.md","ref":"./recipes/reducers/UsingCombineReducers.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"recipes/reducers/BeyondCombineReducers.md","mtime":"2017-03-13T14:28:11.351Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

